@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(279, 65%, 76%);
  --title-color: hsl(207, 4%, 16%);
  --text-color: hsl(207, 4%, 28%);
  --text-color-light: hsl(207, 4%, 56%);
  --body-color: hsl(279, 45%, 85%);
  --container-color: hsl(207, 4%, 95%);

  /* Change the first number */
  /* Blue: 207 - Purple: 250 - Pink: 356 - Teal: 174 */
  --gradient-color: linear-gradient(180deg,
      hsla(207, 48%, 72%, 0),
      hsla(207, 65%, 65%, 1));

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Roboto', sans-serif;
  --title-font: 'Lora', serif;
  --biggest-font-size: 1.5rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-normal: 1;
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 1024px) {
  :root {
    --biggest-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
    --tiny-font-size: .688rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background .4s;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /*   min-height: 100vh; */
  /* for dark mode animation */
}

h1,
h2,
h3 {
  color: var(--title-color);
  font-family: var(--title-font);
  font-weight: var(--font-medium);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/* img {
  max-width: 100%;
  height: auto;
} */




.btn {
  width: 3.5em;
  height: 2.2em;
  margin: 0.5em;
  background: rgba(54, 172, 212, 0.584);
  color: white;
  border: none;
  border-radius: 0.625em;
  font-size: 19px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

button:hover {
  color: black;
}

button:after {
  content: "";
  background: rgb(241, 241, 241);
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

button:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}


.home--social-link {
  font-size: 1.25rem;
  color: black;
  transition: color .3s;
}

.home--social-link:hover {
  color: red;
}


p {
  text-align: justify;
}


.wrapper {
  margin: 50px auto;
  width: 90%;
  animation: fadeInUp 2s ease;
}

img {
  max-width: 550px;
  float: left;
  border-radius: 10px;
  margin-right: 10px;
  animation: fadeInRight 2s ease;
  border: 2px solid rgb(156, 156, 156);
}

.text-box {
  color: #222;
}

.text-box {
  font-size: 28px;
}

.text-box p {
  font-size: 16px;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translatex(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}




@media only screen and (max-width: 600px) {

  .wrapper {
    width: 90%;
  }

  img {
    width: 100%;
  }

  p {
    text-align: justify;
  }

}


@media only screen and (min-width: 601px) {

  .wrapper {
    width: 90%;
  }

  img {
    width: 100%;
  }

  p {
    text-align: justify;
  }

}